<template>
    <div>
        <div class="couponList activity-right">
            <h3>渠道列表</h3>
            <el-input class='search-input' style="width:30%" clearable prefix-icon="el-icon-search" v-model="searchName" placeholder="请输入渠道查询条件"></el-input>
            <el-button type="primary" @click="searchChannel">搜索渠道</el-button>
            <el-button class='right' style="margin-bottom:20px;" type="primary" @click="addChannel"> 添加渠道 </el-button>
            <el-table class="table-common" :data="tableData" element-loading-text="拼命加载中" style="width: 100%">
                <el-table-column class="coupon-colum" prop="channelName" label="渠道名称" width="180">
                </el-table-column>
                <el-table-column class="coupon-colum" prop="channel" label="渠道编号" width="150">
                </el-table-column>
                <el-table-column class="coupon-colum" prop="createTime" label="创建时间" width="180">
                    <template slot-scope="scope">{{ $formate(scope.row.createTime,'yyyy-MM-dd hh:mm:00') }}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" prop="status" label="是否有效" width="180">
                    <template slot-scope="scope">{{scope.row.status == 1 ? '有效' : '无效'}}</template>
                </el-table-column>
                <el-table-column class="coupon-colum" label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editChannel(scope.row)" size="small">编辑</el-button>
                        <el-button type="text" @click="QRCode(scope.row)" size="small">生成二维码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 查看二维码 -->
            <div class='popup-detail storeCode' v-if='isShow'>
                <el-form ref="form" :model="form">
                    <el-form-item label="">
                        <!-- v-loading="loading" -->
                        <div class='code-img' style="margin-left:30px;" v-loading="loading"> <img style="width:100%" :src="imgUrl" alt=""> </div>
                    </el-form-item>
                    <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
                </el-form>
            </div>
            <section class="pagination">
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
        </div>
    </div>
</template>

<script>
import leftBar from "../commonComponents/leftBar.vue";
import { channelList, getCode } from "../../data/postData";
export default {
    components: {
        leftBar
    },
    mounted() {
        let { page } = this.$store.state.channel;
        this.page = page || 1;
        this.getChannelList(this.page);
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            tableData: null,
            total: 0,
            size: "10",
            page: 1,
            isShow: false,
            imgUrl: "",
            loading: false,
            searchName: "",
            form: {}
        };
    },
    methods: {
        //条件查询
        searchChannel() {
            this.page = 1;
            this.getChannelList(this.page);
        },
        //获取渠道列表
        getChannelList(page) {
            var params = {
                data: {
                    page: "" + page,
                    size: "10",
                    searchName: this.searchName
                }
            };
            this.$fetch
                .post(channelList, params)
                .then(res => {
                    console.log(res.data);
                    this.tableData = res.data;
                    this.total = res.total;
                })
                .catch(err => {});
        },
        //生成渠道二维码
        QRCode(scope) {
            if (scope.status == 1) {
                this.isShow = true;
                this.loading = true;
                var params = {
                    data: {
                        page: "pages/index/index",
                        scene: scope.channel
                        //"scene":'15233613580',
                    }
                };
                console.log(params);
                this.$fetch
                    .post(getCode, params)
                    .then(res => {
                        console.log(res);
                        this.isShow = true;
                        this.imgUrl = res.data.imgUrl;
                        var newImg = new Image();
                        newImg.src = res.data.imgUrl;
                        newImg.onload = () => {
                            // 图片加载成功后把地址给原来的img
                            this.loading = false;
                            this.imgUrl = newImg.src;
                        };
                    })
                    .catch(err => {
                        this.$message({
                            message: err.message,
                            type: "error",
                            duration: 1500
                        });
                    });
            } else {
                this.$message({
                    message: "此渠道已失效，无法生成二维码",
                    type: "error",
                    duration: 2000
                });
            }
        },
        //添加渠道
        addChannel() {
            this.$router.push({ path: "/addChannel" });
        },
        //编辑渠道
        editChannel(scope) {
            console.log(scope);
            this.$router.push({ path: "/editChannel/" + scope.id });
        },
        close() {
            this.isShow = false;
            this.imgUrl = "";
        },
        handlePageChange(page) {
            this.page = page;
            this.getChannelList(this.page);
            this.$store.dispatch("saveChannelListPage", this.page);
        },
        pagePrev() {
            this.page--;
            localStorage.setItem("Page", JSON.stringify({ page: this.page }));
            this.getChannelList(this.page);
        },
        pageNext() {
            this.page++;
            localStorage.setItem("Page", JSON.stringify({ page: this.page }));
            this.getChannelList(this.page);
        }
    }
};
</script>

<style scoped lang="less">
// @import url('../../style/coupon.less');
.couponList {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.storeCode {
    width: 400px;
    height: 400px;
    text-align: center;
    overflow: hidden;
    .code-img {
        width: 300px;
        height: 300px;
        margin-top: 30px;
        img {
            width: 300px;
        }
    }
}
</style>